<%@ page import="com.andy.sun.services.TaskService" %>
<%@ page import="com.andy.sun.bean.Task" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>详细任务编辑页面</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="images/12.ico">
    <script src="js/jquery-3.5.1.js"></script>
    <style>
        body {
            background-color: #d1d1fd;
        }

        #outer {
            width: 500px;
            height: 80%;
            margin: 10px auto 0 auto;
            padding: 20px;
            border: 5px dotted #6a96eb;
            border-radius: 10px;
            font-size: 22px;
            background-color: #e6dca1;
        }

        h1 {
            text-align: center;
            font-family: 华文行楷;
            color: #f14ff1;
        }

        input[type="submit"], input[type="reset"], input[type="button"] {
            margin-left: 20px;
            width: 100px;
            height: 30px;
            border-radius: 5px;
            background-color: #4CAF50;
            font-size: 16px;
            color: white;
            border: none;
        }

        input[type="radio"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /* 去掉默认的radio样式 */
            width: 20px;
            height: 20px;
            border: 5px double blue;
            border-radius: 50%;
            outline: violet;
            cursor: pointer;
            margin-left: 80px;
        }

        input[type="radio"]:checked {
            background-color: red;
        }

        input[type="text"], textarea {
            width: 400px;
            border: 1px dashed #255bc4;
            font-size: 16px;
            line-height: 20px;
            padding-left: 10px;
            white-space: pre-wrap; /* 允许换行 */
        }

        textarea {
            margin-left: 100px;
            background-color: #f2e0d0;
            line-height: 22px;
            white-space: pre-wrap; /* 允许换行 */
            word-wrap: break-word; /* 允许长单词换行 */
            resize: none;
        }

        .my_go_index {
            text-align: left;
            margin-top: 20px;
            margin-left: 30px;
            font-size: 22px;
        }

        .my_go_index a {
            text-decoration: none;
            color: #7171ef;
        }

        #btns {
            text-align: center;
        }


        @media (max-width: 1024px) {
            #outer {
                width: 800px;
                height: auto;
                font-size: 44px;
                margin: 20px auto 0 auto;
                padding: 20px;
                border: 5px dotted #6a96eb;
                border-radius: 10px;
                background-color: #e6dca1;
            }

            #btns {
                margin-top: 100px;
            }

            h1 {
                margin: 50px auto;
            }

            form {
                margin-left: 50px;
            }

            input[type="submit"], input[type="reset"], input[type="button"] {
                font-size: 33px;
                margin-left: 10px;
                width: 200px;
                height: 60px;
            }

            input[type="text"], textarea {
                font-size: 33px;
            }

            input[type="radio"] {
                width: 40px;
                height: 40px;
            }

            textarea {
                width: 600px;
                height: 500px;
                margin-left: 50px;
                padding-top: 50px;
                white-space: pre-wrap;
                word-wrap: break-word;
                resize: none;
                line-height: 44px;
            }

            .my_go_index {
                font-size: 44px;
            }
        }

    </style>
</head>
<body>
<%
    int uid = session.getAttribute("uid") == null ? 0 : Integer.parseInt(session.getAttribute("uid").toString());
    if (uid == 0) {
        response.sendRedirect("login.jsp");
        return;
    }
%>

<h1 class="my_go_index"><a href="index.jsp"><— 返回任务列表</a></h1>
<%
    String id = request.getParameter("id") == null ? "" : request.getParameter("id");
    session.setAttribute("editId", id);
    String title = request.getParameter("title") == null ? "" : request.getParameter("title");
    String finished = request.getParameter("finished") == null ? "" : request.getParameter("finished");

    TaskService ts =null;
    if (ts == null) {
        ts = new TaskService(uid);
    }
    String desc = ts.queryTaskById(id);
%>
<div id="outer">
    <h1>详细任务编辑</h1> <span>${requestScope.msg}</span>
    <form action="UpdateTaskServlet" method="post">
        任务编号: <input type="text" readonly
                         name="tid" id="tid" value="${editId}"> <br> <br>
        任务名称: <input type="text" id="taskName" name="title" value="<%=title%>"> <br> <br>
        任务状态: <input type="radio" name="isFinish" value="0"
        <%=(finished.equals("false")?"checked":"")%> id="unFinished">
        <label for="unFinished">未完成</label>
        <input type="radio" name="isFinish" value="1"
            <%=((finished.equals("true")?"checked":""))%> id="finished">
        <label for="finished">完成</label> <br> <br>
        任务描述: <br> <br>
        <textarea name="desc" id="desc" cols="55" class="form-control" maxlength="512" rows="10"><%=desc%></textarea> <br> <br>
        <div id="btns">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input id="deleteBtn" type="button" value="删除任务">
        </div>
    </form>
</div>

</body>
<script>
    $("form").submit(function () {
        let title = $("#taskName").val();
        if (title == "") {
            alert("任务名称不能为空");
            return false;
        }
    });
    $("#deleteBtn").click(function () {
        let tid = $("#tid").val();
        location.href = "DelServlet?tid=" + tid;
    });

</script>
</html>
